<template>
<!-- 自定义分页导航的封装 -->
  <div class="topnav-content">
    <Page class="panel-page"
          :total="pageInfo.total"
          :current="pageInfo.pages"
          :page-size="pageInfo.size"
          :page-size-opts="pageizeOpts"
          @on-page-size-change="onPageZiseChange"
          @on-change="onChange"
          @on-prev="onPrev"
          @on-next="onNext"
          show-elevator show-sizer show-total />
  </div>
</template>
<script>
export default {
  name: "TopnavPage",
  props: {
    pageInfo: {type: Object,default: () => null},
  },
  // v-model
  model:{
    /** 父组件用 v-model 此项可以从父组件接收数据 */
    prop: 'pageInfo',
    /** 返回数据给父组件 */
    event: "returnPage"
  },
  data(){
    return{
      page:{
        desc: ['create_time'],
        pages: 0,
        size: 15,
        total: 0,
        current: 1
      },
      pageizeOpts:[5,10,15,20,30,40,100],
    }
  },
  watch: {
/*    pageInfo(){
      console.log(pagaInfo);
    }*/

  },

  methods:{
/*    changePage(){
      this.page.current = this.page.pages * this.page.size;
      console.log(this.page);
      this.$emit('returnPage', this.page);
    },
    pagesizeChange(pageSize){
      //console.log("pageSize: %d",pageSize);
      this.page.size = pageSize;
      this.$emit('returnPage', this.page);
    },*/
    onPageZiseChange(pageSize){
      console.log("onPageZiseChange: %o",pageSize);
      this.pageInfo.size=pageSize;
      //this.page.current = this.page.pages * this.page.size;
      this.$emit('returnPage', this.pageInfo);
      this.$emit('changePage');
    },
    onChange(page){
      //this.page.pages=page;
      this.pageInfo.current = page;
      console.log("onChange:%o",page);
      this.$emit('returnPage', this.pageInfo);
      this.$emit('changePage');
    },
    onPrev(page){
      //this.page.pages=page;
/*      this.page.current = page;
      console.log("onPrev:%o",page);
      this.$emit('returnPage', this.page);
      this.$emit('changePage');*/
    },
    onNext(page){
      //this.page.pages=page;
/*      this.page.current = page;//this.page.pages * this.page.size;
      console.log("onNext:%o",page);
      this.$emit('returnPage', this.page);
      this.$emit('changePage');*/
    },

  }
}
</script>
<style lang="less">
  @import "./topnav";
</style>
